<template>
	<view :style="{'min-height': '100vh','background': copyLink?'#F3F3F3':'white'}">
		<view style="padding: 0 0 30upx 0;">
			<view style="padding:  48upx 56upx 48upx;background-color: white;">
				<view class="realTit">请选择认证的平台</view>
				<view class="conWrap">
					<view :class="['conItem',selectIndex==1?'active':'']" data-index="1" @click="selectType">
						<image src="../../static/mine/douyin.png" style="height: 40upx;" mode="heightFix"></image>
						<view>抖音</view>
					</view>
					<view :class="['conItem',selectIndex==2?'active':'']" data-index="2" @click="selectType">
						<image src="../../static/mine/xiaohongshu.png" style="height: 24upx;" mode="heightFix"></image>
						<view>小红书</view>
					</view>
					<view :class="['conItem',selectIndex==3?'active':'']" data-index="3" @click="selectType">
						<image src="../../static/mine/dazhong.png" style="height: 48upx;" mode="heightFix"></image>
						<view>大众点评</view>
					</view>
					<view :class="['conItem',selectIndex==4?'active':'']" data-index="4" @click="selectType">
						<image src="../../static/mine/weibo.png" style="height: 38upx;" mode="heightFix"></image>
						<view>微博</view>
					</view>
				</view>
				<view class="realLink" v-if="step>=2">
					<view class="realLinkL">认证链接</view>
					<view class="realLinkR" @click="previewImg">
						<image src="../../static/mine/explain.png"></image>
						<text>如何获取链接？</text>
					</view>
				</view>
				<view :class="['praseTxt',copyLink?'active':'']" @click="paeseTxt" v-if="step>=2">{{copyLink?copyLink:"点此粘贴"}}</view>
				<view :class="['getMsg',copyLink?'active':'']" v-if="step>=2" @click="getMsg" :style="{'opacity':reqFlag?1:.5}">点击获取</view>
			</view>
			
			<view class="userMsg" v-if="step==3">
				<view class="userAvator">
					<view class="userAvatorL" v-if="selectIndex==1">抖音头像</view>
					<view class="userAvatorL" v-if="selectIndex==2">小红书头像</view>
					<view class="userAvatorL" v-if="selectIndex==3">大众点评头像</view>
					<view class="userAvatorL" v-if="selectIndex==4">微博头像</view>
					<image :src="platformData.imgUrl"></image>
				</view>
				<view class="userName">
					<view class="userNameL" v-if="selectIndex==1">抖音名</view>
					<view class="userNameL" v-if="selectIndex==2">小红书名</view>
					<view class="userNameL" v-if="selectIndex==3">大众点评名</view>
					<view class="userNameL" v-if="selectIndex==4">微博名</view>
					<view class="userNameR">{{platformData.name?platformData.name:"未设置"}}</view>
				</view>
				<view class="userName">
					<view class="userNameL" v-if="selectIndex==1">抖音ID</view>
					<view class="userNameL" v-if="selectIndex==2">小红书ID</view>
					<view class="userNameL" v-if="selectIndex==3">大众点评ID</view>
					<view class="userNameL" v-if="selectIndex==4">微博ID</view>
					<view class="userNameR">{{platformData.id}}</view>
				</view>
				<view class="userName">
					<view class="userNameL">粉丝数</view>
					<view class="userNameR">{{platformData.fans?platformData.fans:0}}</view>
				</view>
				<view class="userName" v-if="platformData.give&&selectIndex!=2">
					<view class="userNameL">获赞数</view>
					<view class="userNameR">{{platformData.give}}</view>
				</view>
				<view class="userName" v-if="platformData.give&&selectIndex==2">
					<view class="userNameL">赞藏数</view>
					<view class="userNameR">{{platformData.give}}</view>
				</view>
				<view class="userName" v-if="platformData.grade">
					<view class="userNameL">等级</view>
					<view class="userNameR">Lv{{platformData.grade}}</view>
				</view>
				<!-- <view class="userSex">
					<view class="userSexL">性别</view>
					<view class="userNameR">
						<picker mode="selector" :range="genderList" @change="choiceGender" v-if="selectIndex==1">
							<view class="userSexRR">
								<view>{{genderIndex!=-1?genderList[genderIndex]:'请选择'}}</view>
								<image src="../../static/mine/more.png"></image>
							</view>
						</picker>
						<text v-else>{{platformData.gender==1?'男':(platformData.gender==2?'女':'')}}</text>
					</view>
				</view> -->
			</view>
			
			<view class="label" v-if="step==3">
				
				<view class="labelTit">标签</view>
				<view class="labelTip">认真选择3个你的标签，你选的越精准，平台为你智能匹配的推荐越精准，收到的合作概率越大哦～</view>
				<view @click="showlabel=true">选择标签</view>
				<view class="labelList">
					<view v-if="item.checked" :class="['labelItem',selectList[index]?'active':'']" v-for="(item,index) in labelItem" :key="index" :data-index="index">{{item.name}}</view>
				</view>
				<view class="moneys">
					<view class="moneysL" @click="showIntro">稿费(元)</view>
					<input type="number" placeholder="请输入稿费起始金额" v-model="money" />
				</view>
				<view class="infoMsg">详情介绍</view>
				<textarea maxlength="500" class="infoCon" placeholder="非必填，填写详情介绍，利于店家了解你，更容易让店家找到你，促成合作" v-model="content"></textarea>
			</view>
			<view class="popupBox">
				<u-popup v-model="showlabel" mode="bottom" height="600">
					<view class="popup_top">
						<view style="display: flex;align-items: center;">
							<view class="determine" @click="addLabel = true">新增标签</view>
							<!-- <view class="determine" @click="determineBtn">确定</view> -->
						</view>
						<view class="title">标签</view>
						<view class="cancel" @click="showlabel=false">取消</view>
					</view>
					<scroll-view scroll-y="true" class="labelBox" @scrolltolower="loadMoreLabel">
						<view class="labelItem1" :class="{current:item.checked}" v-for="(item,index) in labelItem"
 :key="index" @click="selectLabel(index)">{{item.name}}</view>
					</scroll-view>
				</u-popup>
			</view>
			<view class="userNameModal">
				<u-modal v-model="addLabel" @confirm="confirmLabel" title="添加标签" :show-cancel-button="true">
					<view class="slot-content">
						<input type="text" v-model="labelVal" :focus="true" placeholder="请输入标签(最多4个字符)" maxlength="4" />
					</view>
				</u-modal>
			</view>
			<view style="padding: 44upx 56upx 56upx;" v-if="step==3">
				<view class="submits" @click="toNext">提交</view>
			</view>
			
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectIndex:-1,
				copyLink:"",
				money:"",
				content:"",
				step:1,
				genderList:["男","女"],
				genderIndex:-1,
				cateList:[],
				selectList:[],
				platformData:{},
				reqFlag:true,
				labelItem:[],
				showlabel:false,
				page:1,
				limit:100,
				moreFlag:false,
				addLabel:false,
				labelVal:""
			}
		},
		onLoad() {
			this.getLabel();
		},
		methods: {
			showIntro(){
				uni.showModal({
					content:"达人用户预设稿费起始金额用于系统适配和达人列表的价格排序，稿费结算金额按实际测评订单中的测评标价为结算基准，自报名或者收到邀请的时候请核实商户的订单金额再确认噢～",
					showCancel:false
				})
			},
			confirmLabel(){
				let obj = {};
				obj.name = this.labelVal;
				obj.type = 5;
				this.$u.api.labelAdd({data:obj}).then(res=>{
					
					this.$refs.uToast.show({
						title:"添加成功",
						type:"success",
						duration:2000
					})
					this.page = 1;
					this.getLabel();
				})
			},
			previewImg(){
				uni.navigateTo({
					url:"/pages/pagefour/pages/realImg/realImg?type=link&index="+this.selectIndex
				})
			},
			choiceCate(e){
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let k = 0;
				for(let i=0;i<this.selectList.length;i++){
					if(this.selectList[i]){
						k++;
					}
				}
				if(this.selectList[index]){
					this.selectList.splice(index,1,false);
				}else{
					if(k==3){
						this.$refs.uToast.show({
							title:"最多选择三项标签,请取消一个后再选择",
							type:"error",
							duration:2000
						})
						return false;
					}else{
						this.selectList.splice(index,1,true);
					}
				}
			},
			getCateList(){
				this.$u.api.industryList().then(res=>{
					
					for(let i=0;i<res.data.list.length;i++){
						this.selectList.push(false)
					}
					this.cateList = res.data.list;
				})
				this.getLabel();
			},
			//确认选中的标签
			determineBtn() {
				let obj = this.labelItem.filter(item => {
					return item.checked == true
				})
				
				this.selectValue = obj;
				this.showlabel = false;
				let objs = {};
				objs.shop_id = this.id;
				objs.data = [];
				for(let i=0;i<obj.length;i++){
					objs.data.push(obj[i].id);
				}
				
			},
			//选择标签
			selectLabel(index) {
				let k = 0;
				for(let i = 0; i < this.labelItem.length; i++){
					if(this.labelItem[i].checked){
						k++;
					}
				}
				let obj = this.labelItem[index];
				if(this.labelItem[index].checked){
					obj.checked = false;
					this.labelItem.splice(index,1,obj);
				}else{
					if(k==3){
						this.$refs.uToast.show({
							title:"最多选择三项标签,请取消一个后再选择",
							type:"error",
							duration:2000
						})
						return false;
					}else{
						obj.checked = true;
						this.labelItem.splice(index,1,obj);
					}
				}
			},
			getLabel(){
				let obj = {};
				obj.type = 5;
				obj.page = this.page;
				obj.limit = this.limit;
				this.$u.api.labelList(obj).then(res=>{
					
					let arrs = [];
					for(let i=0;i<res.list.length;i++){
						let flags = false;
						let objs = res.list[i];
						objs.checked = flags;
						arrs.push(objs);
					}
					if(this.page == 1){
						this.labelItem = arrs;
					}else{
						this.labelItem = this.labelItem.concat(arrs);
					}
					if(this.page<res.list.last_page){
						this.moreFlag = true;
					}else{
						this.moreFlag = false;
					}
				})
			},
			choiceGender(e){
				
				this.genderIndex = e.detail.value;
				this.platformData.gender = this.genderIndex;
			},
			getMsg(){
				let obj = {};
				if(!this.reqFlag){
					return false;
				}
				this.reqFlag = false;
				if(this.selectIndex==1){
					obj.str = this.copyLink;
					this.$u.api.analysisDouying(obj).then(res=>{
						
						let obj = {};
						obj.imgUrl = res.data.user_info.avatar_larger.url_list[0];
						obj.name = res.data.user_info.nickname;
						obj.id = res.data.user_info.short_id;
						obj.fans = res.data.user_info.follower_count;
						obj.give = res.data.user_info.total_favorited;
						obj.gender = this.genderIndex;
						obj.randStr = res.data.randStr;
						this.platformData = obj;
						this.step = 3;
					})
					.catch(err=>{
						this.$refs.uToast.show({
							title:"您的链接格式错误，请重新复制后再试",
							type:"error",
							duration:2000
						})
						this.reqFlag = true;
					})
				}else if(this.selectIndex==2){
					obj.xhsUrl = this.copyLink;
					this.$u.api.analysisXiaohongshu(obj).then(res=>{
					  if(res.code==200) {
              
              let obj = {};
              obj.randStr = res.data.randStr;
              obj.imgUrl = res.data.result.data.imageb;
              obj.name = res.data.result.data.nickname;
              obj.id = res.data.result.data.red_id;
              obj.fans = res.data.result.data.fans;
              obj.give = res.data.result.data.interactions[2].count;
              obj.gender = res.data.result.data.gender;
              this.platformData = obj;
              this.step = 3;
            }else{
              	this.$refs.uToast.show({
              		title:"您的链接格式错误，请重新复制后再试1111111111111111",
              		type:"error",
              		duration:2000
              	})
              	this.reqFlag = true;
            }
					});
					// .catch(err=>{
					// 	this.$refs.uToast.show({
					// 		title:"您的链接格式错误，请重新复制后再试1111111111111111",
					// 		type:"error",
					// 		duration:2000
					// 	})
					// 	this.reqFlag = true;
					// })
				}else if(this.selectIndex==3){
					obj.str = this.copyLink;
					this.$u.api.analysisDzdp(obj).then(res=>{
						
						let obj = {};
						obj.randStr = res.data.randStr;
						obj.imgUrl = res.data.userFace;
						obj.name = res.data.name;
						obj.id = res.data.vipUserInfo.userId;
						obj.fans = res.data.fansCount;
						obj.give = res.data.flowerCount;
						obj.gender = res.data.gender == "男" ? 1 : (res.data.gender == "女" ? 2 : 0);
						obj.grade = res.data.grade;
						this.platformData = obj;
						this.step = 3;
					})
					// .catch(err=>{
					// 	this.$refs.uToast.show({
					// 		title:"您的链接格式错误，请重新复制后再试",
					// 		type:"error",
					// 		duration:2000
					// 	})
					// 	this.reqFlag = true;
					// })
				}else if(this.selectIndex==4){
					obj.str = this.copyLink;
					this.$u.api.analysisWeibo(obj).then(res=>{
						
						let obj = {};
						obj.randStr = res.data.randStr;
						obj.imgUrl = res.data.avatar_hd;
						obj.name = res.data.screen_name;
						obj.id = res.data.id;
						obj.fans = res.data.followers_count;
						// obj.give = res.data.flowerCount;
						obj.gender = res.data.gender == "m" ? 1 : (res.data.gender == "f" ? 2 : 0);
						this.platformData = obj;
						this.step = 3;
					})
					.catch(err=>{
						this.$refs.uToast.show({
							title:"您的链接格式错误，请重新复制后再试",
							type:"error",
							duration:2000
						})
						this.reqFlag = true;
					})
				}
			},
			toNext(){
				let obj = {};
				obj.user = this.platformData;
				obj.user.platform = this.selectIndex;
				let arr = [];
				for(let i=0;i<this.labelItem.length;i++){
					if(this.labelItem[i].checked){
						arr.push(this.labelItem[i]);
					}
				}
				if(arr.length==0){
					this.$refs.uToast.show({
						title:"请先选择标签",
						type:"error",
						duration:2000
					})
					return false;
				}
				obj.label = arr;
				obj.money = this.money;
				obj.content = this.content;
				uni.setStorageSync("realData",obj)
				uni.navigateTo({
					url:"/pages/pagefour/pages/realNext/realNext"
				})
			},
			selectType(e){
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				if(index == this.selectIndex){
					this.selectIndex = -1;
					this.step = 1;
				}else{
					this.selectIndex = index;
					this.step = 2;
				}
			},
			paeseTxt(){
				let _this = this;
				uni.getClipboardData({
					success(res) {
						
						_this.copyLink = res.data;
						_this.reqFlag = true;
					},
					complete(result) {
						console.log(result)
					}
				})
			}
		}
	}
</script>

<style scoped>
	.slot-content {
		padding: 64upx;
		text-align: center;
	}
	.popup_top {
		width: 750upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32upx 24upx;
		border-bottom: 2upx solid #EFEFEF;
		z-index: 999;
	}
	.cancel {
		font-size: 24upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}
		
	.title {
		font-size: 28upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}
		
	.determine {
		font-size: 24upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFAC3F;
	}
	.labelBox {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 24upx;
		height: calc(600upx - 104upx);
		overflow-y: auto;
		box-sizing: border-box;
	
		
	}
	.labelItem1 {
		background: #EEEEEE;
		opacity: 1;
		border-radius: 26upx;
		padding: 8upx 24upx;
		margin-right: 32upx;
		margin-bottom: 32upx;
		display: inline-block;
	}
		
	.labelItem1.current {
		background: #FFF5EA;
		color: #FFAC3F;
	}
	.submits{
		width: 100%;
		/* margin-top: 44upx; */
		height: 88upx;
		line-height: 88upx;
		background: #FFAC3F;
		border-radius: 44upx;
		color: white;
		font-size: 28upx;
		text-align: center;
	}
	.label{
		width: 100%;
		box-sizing: border-box;
		padding: 32upx 56upx 40upx;
		background: white;
		margin-top: 16upx;
	}
	.labelTit{
		font-size: 28upx;
		line-height: 28upx;
		color: #333333;
		margin-bottom: 16upx;
	}
	.labelTip{
		font-size: 20upx;
		line-height: 28upx;
		color: #D0D0D0;
		margin-bottom: 16upx;
	}
	.labelList{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.labelItem{
		height: 40upx;
		line-height: 40upx;
		padding: 0 16upx;
		border-radius: 8upx;
		background: #EEEEEE;
		color: #999999;
		margin-right: 16upx;
		margin-top: 16upx;
	}
	
	.labelItem.active{
		background: #FFF5EA;
		color: #FFAC3F;
	}
	.moneys{
		width: 100%;
		height: 90upx;
		border-top: 2upx solid #EFEFEF;
		border-bottom: 2upx solid #EFEFEF;
		display: flex;
		align-items: center;
		margin-top: 24upx;
	}
	.moneysL{
		width: 200upx;
		line-height: 90upx;
		font-size: 28upx;
		color: #333333;
	}
	.moneys>input{
		width: calc(100% - 200upx);
		height: 90upx;
		font-size: 24upx;
	}
	.infoMsg{
		font-size: 28upx;
		margin-top: 32upx;
		margin-bottom: 24upx;
		color: #333333;
	}
	.infoCon{
		width: 100%;
		height: 162upx;
		box-sizing: border-box;
		border-radius: 8upx;
		border: 2upx solid #E5E5E5;
		padding: 28upx;
		font-size: 24upx;
	}
	
	
	
	
	.userMsg{
		width: 100%;
		background: white;
		padding: 0 56upx;
		margin-top: 20upx;
	}
	.userAvator,.userName,.userSex{
		width: 100%;
		display: flex;
		align-items: center;
		height: 90upx;
		border-bottom: 2upx solid #EFEFEF;
	}

	.userSex{
		border-bottom: none;
		/* margin-bottom: 16rpx; */
	}
	.userSexR{
		display: flex;
		width: calc(100% - 200upx);
		justify-content: flex-end;
		align-items: center;
	}
	.userSexRR{
		display: flex;
		align-items: center;
	}
	.userSexRR>view{
		font-size: 24upx;
		line-height: 90upx;
		color: #D0D0D0;
	}
	.userSexRR>image{
		width: 32upx;
		height: 32upx;
		margin-left: 22upx;
	}
	.userSexRL{
		font-size: 24upx;
		line-height: 90upx;
		color: #D0D0D0;
	}
	.userAvatorL,.userNameL,.userSexL{
		font-size: 28upx;
		line-height: 90upx;
		color: #333333;
		width: 200upx;
	}
	.userNameR{
		font-size: 24upx;
		line-height: 90upx;
		color: #D0D0D0;
	}
	.userAvator>image{
		width: 48upx;
		height: 48upx;
		border-radius: 50%;
	}
	
	
	.getMsg{
		width: 100%;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		border-radius: 44upx;
		background: #FFAC3F;
		opacity: .4;
		color: white;
		font-size: 28upx;
		margin-top: 44upx;
	}
	.getMsg.active{
		opacity: 1;
	}
	
	
	.realLink{
		margin-top: 56upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.realLinkL{
		font-size: 28upx;
		line-height: 28upx;
		color: #333333;
	}
	.realLinkR{
		display: flex;
		align-items: center;
	}
	.realLinkR>image{
		width: 24upx;
		height: 24upx;
		margin-right: 6upx;
	}
	.realLinkR>text{
		font-size: 20upx;
		line-height: 20upx;
		color: #FF5555;
	}
	.praseTxt{
		margin-top: 32upx;
		width: 100%;
		height: 80upx;
		box-sizing: border-box;
		border: 2upx solid #E5E5E5;
		border-radius: 8upx;
		color: #999999;
		font-size: 24upx;
		line-height: 76upx;
		padding: 0 28upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.praseTxt.active{
		color: #333333;
	}
	
	
	.realTit{
		font-size: 28upx;
		color: #333333;
		margin-bottom: 30upx;
	}
	.conWrap{
		display: flex;
		flex-wrap: wrap;
	}
	.conItem{
		width: 260upx;
		height: 84upx;
		border: 2upx solid #E5E5E5;
		border-radius: 8upx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 32upx;
		margin-top: 24upx;
	}
	.conItem:nth-child(1),
	.conItem:nth-child(2){
		margin-top: 0;
	}
	.conItem.active{
		background: #FFF9F2;
		border-color: #FFAC3F;
	}
	.conItem>view{
		font-size: 24upx;
		margin-left: 18upx;
	}
</style>
